<template>
  <div class="top_bar">
    <div class="logo">
      <img src="@/assets/images/yksg.svg" class="logo_img"/>
      <p class="logo-name">一刻时光</p>
    </div>
    <div class="menu">
        <YKButtonVue  nom="cprimary" class="menu-message">留言墙</YKButtonVue>
        <YKButtonVue  nom="csecondary" class="menu-photo">照片墙</YKButtonVue>
    </div>
    <div class="user">
        <div class="user_head"></div>
    </div>
  </div>
</template>

<script>
import YKButtonVue from './YKButton.vue'
export default {
    data(){
        return {

        }
    },
    components:{
        YKButtonVue
    }
}

</script>

<style lang='less' scoped>
    .top_bar{
        width:100%;
        height: 52px;
        background: rgba(255,255,255,0.80);
        box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.1);
        backdrop-filter: blur(10px);
        position: fixed;
        top:0;
        left: 0;
        z-index: 9999;
        z-index: 9999;
        display: flex;
        justify-content: space-between;
        align-items: center;
       .logo{
          display: flex;
          align-items: center;
          width: 200px;
        .logo-name {
          font-size: 20px;
          color:@gray-1;
          font-weight: 600;
          padding-left: 10px;
        }
      }
      .menu{
        .menu-message{
            margin-right: 24px;
        }
      }
      .user{
        width: 200px;
        .user_head{
          float: left;
          border-radius: 50%;
          height: 36px;
          width: 36px;
          background-image: linear-gradient(180deg,#7BE7FF 2%,#1E85E2);
        }
      }
    }
</style>
